<!--admin评价-->
<template>
    <div>
        <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>ADMIN评价</el-breadcrumb-item>
            </el-breadcrumb>
            <div style="margin: 10px auto;"></div>
                <el-form :inline="true" :model="search" class="user-search">

            <el-form-item label="搜索：">
                <el-select size="small" v-model="search.id" clearable placeholder="请选择">
                    <el-option
                    
                    v-for="item in options"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
             
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="findData()">搜索</el-button>
                <el-button size="small" type="danger" icon="el-icon-plus" @click="add()">添加</el-button>
            </el-form-item>

           

            </el-form>
            <div style="margin: 10px auto;"></div>

             <!--列表-->
            
            <el-table size="small"  style="width: 100%" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" >
                
                <el-table-column
                    width="200"
                prop="user.username"
                label="姓名">
                </el-table-column>

                <el-table-column
                    width="200"
                prop="user.url"
                label="头像">
                <template slot-scope="scope">
                        <el-avatar :size="50" :src="scope.row.user.url"></el-avatar>
                </template>
                </el-table-column>

                <el-table-column
                    width="200"
                prop="user.tel"
                label="电话">
                </el-table-column>

                <el-table-column
                    width="200"
                prop="message"
                label="内容">
                </el-table-column>

                <el-table-column
                    width="200"
                prop="score"
                label="评分">
                     <template slot-scope="scope">
                         <el-rate
                                v-model="scope.row.score"
                                show-text>
                                </el-rate>
                    </template>
                </el-table-column>


                
            </el-table>

            <!--弹窗-->
            <el-dialog title="打分" :visible.sync="Visible" width="40%" >
                   <el-form label-width="120px" :model="Form" >
                        <el-form-item label="教练" >
                            <el-select size="small" v-model="Form.coaid" clearable placeholder="请选择">
                                    <el-option
                                    
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.username"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                        </el-form-item>

                        <el-form-item label="备注" >
                        <el-input type="textarea"
                                            :rows="2" style="width:300px" size="small" v-model="Form.message" auto-complete="off" placeholder="请输入内容"></el-input>
                        </el-form-item>

                        <el-form-item label="评分" >
                            <el-rate
                                v-model="Form.score"
                                show-text>
                                </el-rate>
                        </el-form-item>
                        

                        <el-form-item>
                            <el-button type="primary" @click="save()">保存</el-button>
                        </el-form-item>
                    </el-form> 
            </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            listData:[],
            loading:false,
            search:{
                id:''
            },
            options:[],
            Visible:false,
            Form:{
                coaid:'',
                score:0,
                message:'',

            }
        }
    },
    created(){
        this.findOptions();
        this.findData();
    },
    methods: {
        save(){
             this.$api.post("/evaluate/token/insertEvaluate",this.Form,res=>{
                    this.Visible = false;
                    this.findData();
            })
        },
        add(){
                this.Visible =true
        },
        findOptions(){
            this.$api.get("/user/token/findCoachAll",'',res=>{
                    this.options = res.data.data;
            })
        },
        findData(){
            this.MyLoading();
            this.$api.get("/evaluate/token/findEvaluateAll",{"coaid":this.search.id},res=>{
                    this.listData = res.data.data;
            })
        },
         MyLoading(){
            this.loading =true;
            setTimeout(()=>{
                this.loading =false
            },500)
        },
    },
}
</script>
<style scoped>

</style>